//引入API
import { createRouter, createWebHashHistory } from "vue-router"

//登录页
const login = () => import('../views/login.vue')
//用户中心页面
const useCenter = () => import("../views/user-center/index.vue");
//引入用户设置和个人信息界面
const useProfile = () => import("../views/user-center/Profile.vue");
const useSettings = () => import("../views/user-center/Settings.vue");
//404页
const NotFound = () => import("../views/404.vue");
const routes = [
    //默认打开登录界面
    {
        path: '/',
        //重定向到login（用户访问应用程序的首页时，将会被自动重定向到 '/login' 页面）
        redirect: '/login'
    },
    {
        //定义 '/login' 路径，名称'login'，并指定组件为 'login'
        path: '/login',
        name: "login",
        component: login
    },


    {
        //定义 '/user' 路径，名称为'userCenter'，并指定组件为 'useCenter'
        //因为个人信息和个人设置页要在用户中心页中展示，所以需要在usecenter下设置两个子路由
        path: '/user',
        name: 'userCenter',
        component: useCenter,
        redirect: '/user/Profile',  //默认先访问Profile路径
        children: [
            {
                //当用户点击或访问 '/user/Profile' 路径时（点击个人信息页），将'useProfile' 组件加载到页面上，并在浏览器中显示出来。
                path: 'Profile',
                name: 'Profile',
                component: useProfile
            },
            //当用户访问 '/user/Profile' 路径时（点击个人设置页），将'useProfile' 组件加载到页面上，并在浏览器中显示出来。
            {
                path: 'settings',
                name: 'settings',
                component: useSettings
            },
        ]

    },
    //设置404页。这种路径匹配模式会匹配所有未被其他路由路径捕获的路径，相当于是默认的路由
    {
        path: '/:pathMatch(.*)*',
        name: 'NotFound',
        component: NotFound
    },


]

//创建一个路由的实例化对象
const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router
